<template>
  <div class="searchBox">
    <el-input v-model="searchData"></el-input>
    <div class="paddingBox">
      <el-tabs v-model="activeName" @click.stop="index">
        <el-tab-pane label="All" name="all"></el-tab-pane>
        <el-tab-pane label="Apps" name="apps"></el-tab-pane>
        <el-tab-pane label="Documents" name="documents"></el-tab-pane>
        <el-tab-pane label="Web" name="web"></el-tab-pane>
        <el-tab-pane label="More" name="more"></el-tab-pane>
      </el-tabs>
      <component :is="page"></component>
    </div>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import All from './components/all.vue'
import Others from './components/others.vue'
export default {
  components:{
    All,
    Others
  },
  setup() {
    let searchData = ref(undefined);
    let activeName = ref("all");
    const page = ref('All')
    // input聚焦时，阻止事件冒泡，防止关闭搜索框
    const aaa=()=>{}
    const index=()=>{
      if(page.value.toLowerCase()===activeName.value.toLowerCase()) return
      // page.value = activeName.value.replace(activeName.value[0], activeName.value[0].toUpperCase());
      page.value = activeName.value==='all'?'All':'Others'
    }
    return {
      searchData,
      activeName,
      aaa,
      index,
      page
    };
  },
};
</script>

<style lang='scss' scoped>
.searchBox {
  box-sizing: border-box;
  padding: 12px;
  width: 100%;
  text-align: left;
}
.el-input {
  ::v-deep .el-input__inner {
    height: 34px;
    line-height: 34px;
    border: solid 2px #0e60e4;
    background-image: url("~@/assets/img/icon/ui/search.png");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 10px center;
    background-color: rgba(255, 255, 255, 0);
    padding-left: 35px;
  }
}
::v-deep .el-tabs{
  border-bottom: none;
  .el-tabs__item{
    font-size: 13px;
  }
  .el-tabs__header,
  .el-tabs__nav-wrap{
    position: static;
  }
}
.paddingBox{
  padding: 0 8px;
}
</style>